<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform-origin属性</title>
<style>
#div1{	
	position:relative;
	width: 200px;
	height: 200px;
	margin: 100px auto;
	padding:10px;
	border: 1px solid black;
}
#box02{
	padding:20px;
	position:absolute;
	border:1px solid black;
	background-color: red;
	transform:rotate(45deg);               /*旋转45°*/	
	-webkit-transform:rotate(45deg);       /*Chrome浏览器兼容代码*/
	transform-origin:20% 40%;             /*更改原点坐标的位置*/	    	   
	-webkit-transform-origin:20% 40%;     /*Chrome浏览器兼容代码*/
}
#box03{
	padding:20px;
	position:absolute;
	border:1px solid black;
	background-color:#FF0;
	transform:rotate(45deg);               /*旋转45°*/	
	-webkit-transform:rotate(45deg);       /*Chrome浏览器兼容代码*/
}
</style>
</head>
<body>
<div id="div1">
    <div id="box02">更改基点位置</div>
    <div id="box03">未更改基点位置</div>
</div>
</body>
</html>
